<template>
  <el-card class="favorite-posts-card">
    <h2>我的收藏</h2>
    <div v-for="(post, index) in favoritePosts" :key="post.id" class="favorite-post-item">
      <h3 @click="goToPostDetail(post.id)">{{ post.title }}</h3>
      <div class="favorite-action">
        <el-button

            :icon="Star"
            :type="isPostFavorited(post.id) ? 'warning' : ''"
            @click="toggleFavorite(post.id)"
            circle
        ></el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {Star}from '@element-plus/icons-vue';
// 假设你从某个地方获取了收藏的帖子列表
const favoritePosts = ref([
  // 示例数据
  {id: 1, title: '2024上半年教师资格证笔试准考证打印通知！', isFavorited: false},
  {id: 2, title: '2024考研初试成绩查询界面已更新', isFavorited: true},
  {id: 3, title: '注意！2024上半年教资笔试4个重要时间点！', isFavorited: true},
  {id: 4, title: '注意！北京地区2024年度监理工程师职业资格考试缴费提示！', isFavorited: true},
  {id: 5, title: '北京市2024年度二级建造师执业资格考试报名提示', isFavorited: true},
  {id: 6, title: '注册建筑师资格考试', isFavorited: true},


  // ...
]);



// 辅助函数，用于判断帖子是否被收藏
function isPostFavorited(postId) {
  const post = favoritePosts.value.find(p => p.id === postId);
  return post ? post.isFavorited : false;
}

// 你可以在这里添加其他逻辑，比如从API获取帖子列表等
// onMounted(() => {
//   // 获取帖子列表的逻辑
// });
// 模拟的后端状态存储（实际情况中可能是localStorage、IndexedDB或服务器API）
const mockBackendStorage = {
  favoritePosts: favoritePosts.value, // 初始时从模拟存储中获取数据
  save() {
    // 在这里，我们实际上什么都不做，因为我们是模拟的
    // 但如果你使用的是localStorage或服务器API，你会在这里更新数据
  }
};

// 假设的函数，用于跳转到帖子的具体信息页面
function goToPostDetail(postId) {
  // 使用router或其他方式跳转到帖子详情页
  console.log(`Navigating to post detail with ID: ${postId}`);
}

// 假设的函数，用于切换帖子的收藏状态
function toggleFavorite(postId) {
  const post = favoritePosts.value.find(p => p.id === postId);
  if (post) {
    post.isFavorited = !post.isFavorited;
    // 假设我们保存了更新后的帖子列表到模拟的后端状态存储
    mockBackendStorage.favoritePosts = favoritePosts.value;
    mockBackendStorage.save(); // 调用保存函数（这里不执行任何操作）
  }
}

// 模拟从后端加载收藏的帖子列表（页面加载时）
onMounted(() => {
  // 在实际情况中，你会从localStorage、IndexedDB或服务器API加载数据
  // 这里我们只是简单地使用模拟数据
  favoritePosts.value = mockBackendStorage.favoritePosts;
});

// 如果你需要的话，可以在页面卸载时保存状态（但在这个简单的例子中我们不需要）
// onUnmounted(() => {
//   // 调用保存函数或其他清理逻辑
// });
</script>

<style scoped>
.favorite-posts-card {
  margin: 20px;

}

.favorite-post-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.favorite-post-item:last-child {
  border-bottom: none;
}

.favorite-action {
  display: flex;
  align-items: center;
}


</style>